<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>待办事项列表</title>
  <style>
    .completed-class {
      background: #eaeaea;
      text-decoration: line-through;
    }
    .active {
      background: #f00;
      color: #fff;
    }
  </style>
</head>
<body>
  <div id="app">
    <h1>待办事项列表</h1>
    <div>
      <input
        ref="inputRef"
        type="text"
        placeholder="请输入新待办事项"
        v-model.trim="inputValue"
        @keydown.enter="addTodoItem"
      >
      <button @click="addTodoItem">添加</button>
    </div>
    <div>
      <div>
        <button :class="{active: type === 'all'}" @click="filter('all')">所有</button>
        <button :class="{active: type === 'completed'}" @click="filter('completed')">已完成</button>
        <button :class="{active: type === 'uncompleted'}" @click="filter('uncompleted')">未完成</button>
      </div>
      <div v-if="todos.length === 0">待办事项列表为空</div>
      <ul v-else>
        <li v-for="todo in currentTodos">
          <span :class="{'completed-class': todo.completed}" :style="{display: 'inline-block'}">{{ todo.id }} - {{ todo.title }} - {{ todo.completed ? '已完成' : '未完成' }} </span>
          <button @click="toggleTodoItem(todo.id)">标记为{{todo.completed ? '未' : '已'}}完成</button>
          <button @click="removeTodoItem(todo.id)">删除</button>
        </li>
      </ul>
    </div>
  </div>
  <script src="./lib/vue.js"></script>
  <script>
    let index = 2 // 全局编号
    
    const vm = new Vue({
      el: '#app',
      data: {
        // 文本框中绑定的数据
        inputValue: '初始值',
        // 定义数组保存所有待办事项
        todos: [{
          id: 1,
          title: '复习HTML',
          completed: false
        }],
        type: 'all', // 筛选待办事项数据的类型 all:所有 completed:已完成 uncompleted:未完成
        currentTodos: [], // 当前显示的待办事项数组
      },
      computed: {
        // 已完成的待办事项
        completedTodos() {
          return this.todos.filter(todo => todo.completed)
        },
        // 未完成的待办事项
        uncompletedTodos() {
          return this.todos.filter(todo => !todo.completed)
        }
      },
      methods: {
        // 添加新待办事项
        addTodoItem() {
          // 文本框自动获得焦点
          this.$refs.inputRef.focus()

          // 输入为空，则不添加
          if (this.inputValue.length === 0) {
            return
          }
          // 向数组中添加新待办事项对象
          this.todos.push({
            id: index++,
            title: this.inputValue,
            completed: false,
          })
          // 清空文本框
          this.inputValue = ''
        },
        // 修改待办事项完成状态
        toggleTodoItem(id) {
          // console.log('toggle...', id)
          this.todos.forEach(todo => {
            if (todo.id === id) {
              todo.completed = !todo.completed
            }
          })
        },
        // 删除待办事项
        removeTodoItem(id) {
          // console.log('删除：', id)
          this.todos = this.todos.filter(todo => todo.id !== id)
        },
        // 筛选数据
        filter(type) {
          this.type = type
        }
      },
      watch: {
        type: { // 监视 type 取值变化，当 type 变化时，修改当前渲染的 todos 数据
          handler(val) {
            switch(val) {
              case 'all':
                this.currentTodos = this.todos
                break
              case 'completed':
                this.currentTodos = this.completedTodos
                break
              case 'uncompleted':
                this.currentTodos = this.uncompletedTodos
                break
            }
          },
          immediate: true
        }
      }
    })
   
  </script>
</body>
</html>